<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Selection Demo</title>
    <script src="https://unpkg.com/vue@3.2.4"></script>
    <script src="../../dist/vue-tree.umd.js"></script>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../../dist/vue-tree.css">
</head>

<body>
    <div class="container">
        <h1>Selection Demo</h1>
        <div id="app">

            <label for="modeSelect">Selection Mode</label>
            <select v-model="selectionMode" id="modeSelect" style="margin-bottom: 2rem;">
                <option value="single">Single</option>
                <option value="selectionFollowsFocus">Selection Follows Focus</option>
                <option value="multiple">Multiple</option>
                <option value="">No Selection</option>
            </select>
            <tree id="customtree" :initial-model="model" :model-defaults="modelDefaults" :selection-mode="normalizedSelectionMode" ref="tree"></tree>
            <section id="selectedStuff">
                <button type="button" @click="refreshSelectedList">What's selected?</button>
                <ul id="selectedList">
                    <li v-for="selectedNode in selectedNodes">{{ selectedNode.id }}</li>
                </ul>
            </section>
        </div>
    </div>

    <script type='module'>
        import selectionData from './selection.js';

        Vue.createApp({
            components: {
                tree: window['vue-tree']
            },
            data() {
                return {
                    model: selectionData,
                    modelDefaults: {
                        addChildTitle: 'Add a new child node',
                        deleteTitle: 'Delete this node',
                        expanderTitle: 'Expand this node'
                    },
                    selectionMode: 'single',
                    selectedNodes: []
                };
            },
            computed: {
                normalizedSelectionMode() {
                    return this.selectionMode === '' ? null : this.selectionMode;
                }
            },
            methods: {
                refreshSelectedList() {
                    this.selectedNodes = this.$refs.tree.getSelected();
                }
            }
        }).mount('#app')
    </script>
</body>

</html>